<template>
  <section class="todoapp">
    <TodoHeader />
    <TodoMain />
    <TodoFooter />
  </section>
</template>

<script setup lang="ts">
/**
 *  学习目标：Todos 案例
 *    1. 拆分组件(头部，主体，底部)
 *    2. 初始化列表数据，并渲染到主体组件中
 *    3. 主体 - 根据 id 删除数据
 *    4. 主体 - 根据 id 更新完成状态
 *    5. 底部 - 删除已完成任务
 *    6. 底部 - 计算剩余任务数量
 *    7. 底部 - 高亮切换效果
 *    8. 主体 - 计算显示列表(全部显示/未完成/已完成)
 *    9. 主体 - 计算全选状态，切换全选状态
 *    10. 头部 - 获取输入框数据，按回车键，新增待办任务
 *    11. 数据初始化时 - 获取本地存储数据
 *    12. 数据被更新时 - 设置本地存储数据
 */
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
</script>
